<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
    
    
      
    
    
</head>
<script>
	//通过内容改变调用
	function fun(i,id){
		if(i == 1){
			parentId = id;
			itemCat(i,parentId);
		}else if(i == 2){
			parentId = id;
			itemCat(i,parentId);
		}else {
			parentId = id;
			itemCat(i,parentId);
		}
	}
	//一级ID
	function thisId(id){
		$("#category").val(id);
	}
	//查询三级
	function itemCat(i,parentId){
		$.ajax({
			url:"/goodController/findList",
			type:"post",
			dataType:"json",
			data:{parentId:parentId},
			success:function (result){
				if (result.code == 10000){
					var data = result.data;
					var option = '<option value="-1">-请选择-</option>';
					for (var j = 0;j < data.length;j++){
						option+='<option value="'+data[j].id+'">'+data[j].name+'</option>';

					}
					if(i==1){
						$("#fu").html(option);
					}else if(i==2){
						$("#zi").html(option);
					}else{
						$("#sun").html(option);
					}
				}else{
					alert(result.message);
				}

			},
			error:function (data){
				alert("网络异常")
			}
		})
	}
	//模板
	function typeId(id){
		$.ajax({
			url:"/goodController/getTypeId",
			type : "post",
			dataType : "json",
			async : false,
			data : {id : id},
			success:function (result){
				if (result.code == 10000){
					var data = result.data;
					$("#typeTemplateId").val(data.typeId);
				}else{
					alert(result.message);
				}
				$("#itemId").val(id);
				tbBrand();

			},
			error:function (data){
				alert("网络异常")
			}
		})
	}
	//品牌
	function tbBrand(){
		$.ajax({
			url:"/goodController/selectBrand",
			type : "post",
			dataType : "json",
			async : false,
			data : {id : $("#typeTemplateId").val()},
			success:function (result){
				console.log(result)
				if (result.code == 10000){
					var data = result.data.typeTemplate;
					//品牌
					var  brands= [];
					brands = JSON.parse(data.brandIds);
					var option=''
					for (var i=0;i<brands.length;i++){
						 option += '<option id="option" value="'+brands[i].id+'">'+brands[i].text+'</option>';
					}
					$("#brandId").html(option);

					//规格
					console.log(result.data.specVOList)
					var a = result.data.specVOList[1].optionList;
					var div1 ='';
					for (var i = 0;i<a.length;i++){
						div1+='<span>';
						div1+='<input type="checkbox" name="specificationItems" value="'+a[i].optionName+'">' + a[i].optionName+"&nbsp;&nbsp;&nbsp;";
						div1+='</span>';
					}
						$("#div1").html(div1);

						var div2 ='';
						var b = result.data.specVOList[0].optionList;
						for(var i=0;i<b.length;i++){
							div2+='<span>';
							div2+='<input type="checkbox" name="specificationItems" value="'+b[i].optionName+'">' + b[i].optionName +"&nbsp;&nbsp;&nbsp;";
							div2+=' </span>';
						}
							$("#div2").html(div2);
				}else{
					alert(result.message);
				}
			},
			error:function (data){
				alert("网络异常")
			}
		})
	}

	//品牌
	function brand(id){
		$("#tbBrandId").val(id);
	}
	//图片增加
	function image(){
		var color = $("#color").val();
		var itemImages = $("#itemImages").val();

		//创建一行
		var trs = document.createElement("tbody");
		var upload = "";
		upload += '<tbody >';
		upload += '<tr name="tables">';
		upload += '<td><span>' + color + '</span>';
		upload += '</td>';
		upload += '<td>';
		upload += '<img alt="" src="' + itemImages + '" width="100px" height="100px">';
		upload += '</td>';
		upload += '<td>';
		upload += '<button onclick="deleteTr(this)" type="button" className="btn btn-default" title="删除">';
		upload += '<i className="fa fa-trash-o"></i> 删除';
		upload += '</button>';
		upload += '</td>';
		upload += '</tr>';
		upload += '</tbody>';
		trs.innerHTML = upload;
		var table = document.getElementById("table");
		table.appendChild(trs);
		$("#table").html(upload)
	}
	//删除图片本行
	function deleteTr(obj){
		var table = document.getElementById("table")
		var tr = obj.parentNode.parentNode.parentNode;
		table.removeChild(tr);
	}
	//增加
	function addGoods(){
		//获取扩展属性的信息
		var kuozanList = [];
			var c1 = $("#cust1").val();
			var c2 = $("#cust2").val();
			kuozanList.push({text:c1,value:c2});
			var kuozanJson = JSON.stringify(kuozanList);
		//获取图片信息
		var imageList = [];
		var tables = $("[name=tables]");
		for(var i=0;i<tables.length;i++){
			var span = $(tables[i]).find("span").text();
			var src = $(tables[i]).find("img").prop("src");
			imageList.push({color:span,url:src});
		}
		var imageJson = JSON.stringify(imageList);

		var name = $("#goodsName").val();
		var caption = $("#caption").val();
		var price = $("#price").val();
		var introduction = $("#introduction").val();
		var pack = $("#packageList").val();
		var salel = $("#saleService").val();
		var itmePrice = $("#price2").val();
		//规格
		var specList = "";
		var specList2 = [];
		var spec1 = $("[name=specificationName1]");
		for(var i=0;i<spec1.length;i++){
			var span1 = $(spec1[i]).find("#d1").text();
			var check1 = $(spec1[i]).find("input:checked").val();
			specList2.push({attributeName : span1, attributeValue : check1})
			specList+="{\""+ span1+"\":"+"\""+ check1+"\",";

		}
		var spec2 = $("[name=specificationName2]");
		for(var i=0;i<spec2.length;i++){
			var span2 = $(spec2[i]).find("#d2").text();
			var check2 = $(spec2[i]).find("input:checked").val();
			specList2.push({attributeName : span2, attributeValue : check2})
			specList+="\""+span2+"\":"+check2+"\""+"}"+",";

		}
		var spec = specList.substr(0,specList.length-1).split(",");
		var specJson2 = JSON.stringify(specList2);
		//拼接字符串
		var specName = "";
		specName += $("#brandId").find("option:selected").text() +" "+ name +" "+ "("+ span1 +")" + " "+ check1 +" "+"("+ span2 +")" + " " +check2 + " "+ $("#color").val();
		//是否默认
		if($("#isDefault").prop("checked")){
			isDefault = 1;
		}else{
			isDefault = 0;
		}

		$.ajax({
			url:"/goodController/save",
			type:"post",
			dataType:"json",
			async:false,
			data:{customAttributeItems:kuozanJson,itemImages:imageJson,packageList:pack,saleService:salel,goodsName:name,
				caption:caption,price:price,introduction:introduction,spec:spec,title:specName,
				itmePrice:itmePrice,specificationItems:specJson2,itemId:$("#category").val(),
				tbBrandId:$("#tbBrandId").val(),num:$("#num").val(),categoryid:$("#itemId").val(),isDefault:isDefault,image:$("#itemImages").val()},
			success:function (result){
				if(result.code == 10000){
					alert("增加成功");
				}else{
					alert("增加失败")
				}
			},
			error:function (data){

			}
		})
	}
</script>
<!-- 所属类目 -->
<input type="hidden" id="itemId">
<!-- 类目 -->
<input type="hidden" id="category">
<!-- 品牌 -->
<input type="hidden" id="tbBrandId">
<body class="hold-transition skin-red sidebar-mini" onload="fun(1,0)">

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">
					<!--tab页-->
                    <div class="nav-tabs-custom">
						<form id="form">
                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control" id="fu" onchange="fun(2,this.value),thisId(this.value)">
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="zi" onchange="fun(3,this.value)"></select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="sun" onchange="typeId(this.value)"></select>
		                              			</td>
		                              			<td>
		                           	  				<input type="text" size="2" id="typeTemplateId" disabled>
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" name="goodsName" id="goodsName"  placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" onchange="brand(this.value)" id="brandId" name="brandId"></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" name="caption" id="caption" placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" name="price" id="price"  placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea id="introduction" style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" name="packageList" id="packageList"  placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control" name="saleService" id="saleService"  placeholder="售后服务"></textarea>
		                           </div>
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable" id="table">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
											</tr>
							            </thead>
					                    <tbody>

					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type">
	                                <div>
		                                <div class="col-md-2 title">扩展属性1</div>
				                        <div class="col-md-10 data">
				                              <input class="form-control" id="cust1" name="customAttributeItems" placeholder="扩展属性1">
				                        </div>
	                                </div>
									<div>
		                                <div class="col-md-2 title">扩展属性2</div>
				                        <div class="col-md-10 data">
				                              <input class="form-control" id="cust2" name="customAttributeItems" placeholder="扩展属性2">
				                        </div>
	                                </div>
                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" value="1" name="isEnableSpec">
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
	                                <div class="row data-type">
	                                
		                                <div name="specificationName1" >
			                                <div class="col-md-2 title" id="d1">网络制式</div>
					                        <div class="col-md-10 data" id="div1">

					                        </div>
		                                </div>   
										<div name="specificationName2" >
			                                <div class="col-md-2 title" id="d2">屏幕尺寸</div>
					                        <div class="col-md-10 data" id="div2">

					                        </div>
		                                </div>
		                                                                                  
	                                </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>					                          
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody>
						                      <tr>					                           
										            <td>
										            	4.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control" id="price2" name="price" placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" name="num" id="num" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" name="isDefault">
										            </td>
						                      </tr>
											  
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>

                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
						</form>
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="addGoods()"><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">
					<tr>
						<td>颜色</td>
						<td><input id="color" class="form-control" placeholder="颜色" >  </td>
					</tr>
					<tr>
						<div class="form-group">
							<label for="myFile">上传文件</label>
							<input type="file" id="myFile" name="itemImages" multiple/>
							<input type="text" name="itemImages" id="itemImages">
						</div>
					</tr>
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" onclick="image()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[id="introduction"]', {
			themeType: 'simple',

			resizeType: 1,

			uploadJson: 'common/KEditor/upload_json.php',

			fileManagerJson: 'common/KEditor/file_manager_json.php',

			allowFileManager: true,
			afterBlur: function(){this.sync();}
		});
	});

</script>
			<link rel="stylesheet" type="text/css" href="../js/bootstrap-fileinput/css/fileinput.css">
			<script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.js"></script>
			<script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
</body>
</html>
<script>
	$(function(){
		$('#myFile').fileinput({
			language: 'zh',
			uploadUrl: '/upload',
			maxFileCount : 5,
			enctype : "multipart/form-data",
			maxFileSize : 1024,
			allowedFileExtensions : ["jpg", "png", "gif"],
			enctype : "multipart/form-data",
			browseClass: 'btn btn-primary'
		});


		$("#myFile").on("fileuploaded", function(event, data, previewId, index){

			$("#itemImages").val(data.response.data);
		})
	})


</script>